<template>
  <view class="container channel_container">
    <u-sticky offset-top="0">
      <view class="channel_tab">
        <u-tabs :list="tabsTitle" @change="tabschange" :current="activeKey" lineColor="#4A76F7" :inactiveStyle="{color: '#8091A4', fontSize: '28rpx'}" :activeStyle="{ color: '#333333', fontWeight: '500'}"></u-tabs>
        <view class="filter_icon">
          <tm-icon fontSize="24" name="iconfont icon-shaixuanweixuan" color="#999999" @click="openFilter" ></tm-icon>
        </view>
      </view>
    </u-sticky>

    <view class="channel_list">
      <view v-for="(item,i) in channelData" class="channel_item" :key="i" @click="() => checkChannelDetail(item)">
        <tm-sheet :margin="[24, 20]" :round="3" :shadow="2">
          <view class="channel_item_title">
            <view class="channel_type">
<!--              1 中介  2 关系  3 推广-->
              <tm-tag v-if="item.type === 1" text :shadow="0" color="#4A76F7" size="m" :label="item.name"></tm-tag>
              <tm-tag v-if="item.type === 2" text :shadow="0" color="#40C275" size="m" :label="item.name"></tm-tag>
              <tm-tag v-if="item.type === 3" text :shadow="0" color="#FF7D00" size="m" :label="item.name"></tm-tag>
              <tm-tag v-if="item.type === 4" text :shadow="0" color="#8657DA" size="m" :label="item.name"></tm-tag>
            </view>
            <view v-if="item.deal_at" class="sign_time">
              <text class="sign_text">最近签约</text>
              <text class="sign_time_text">{{moment(item.deal_at).format('YYYY-MM-DD')}}</text>
            </view>
          </view>
          <view class="channel_item_head">
            <view class="channel_item_type">
              公司
            </view>
            <view class="channel_head_inner">
              <view class="inner_value">渠道方</view>
              <view class="inner_text">上海万名商务服务有限公司</view>
            </view>
          </view>
          <view class="channel_item_content">
            <view class="cus_item">
              <view class="cus_item_label">介绍客户数</view>
              <view class="cus_item_value">{{item.count}}</view>
            </view>
            <view class="cus_item">
              <view class="cus_item_label">成交数</view>
              <view class="cus_item_value">{{item.deal_count}}</view>
            </view>
            <view class="cus_item">
              <view class="cus_item_label">成交率</view>
              <view class="cus_item_value">{{item.rate}}</view>
            </view>
          </view>
        </tm-sheet>
      </view>

    </view>

    <view class="cus_footer_btn">
      <tm-button block label="新建渠道" round="25" @click="addChannel"></tm-button>
    </view>
<!--     筛选框 -->
    <u-popup :show="filterVisible" @close="close" @open="open" mode="top" :round="10">
      <view class="zs_filter_main">
        <view class="zs_filter_title">搜索</view>
        <view class="zs_filter_item" style="padding-bottom: 24px;">
          <up-input
              v-model="searchParams.keyword"
              placeholder="支持搜索渠道名称"
              prefixIcon="search"
              shape="circle"
              prefixIconStyle="font-size: 22px;color: #909399"
          ></up-input>
        </view>
        <view class="zs_filter_title">签约时间</view>
        <view class="zs_filter_item filter_range_time">
          <view class="filter_range" @click="() => selectTime(1)">
            <text v-if="searchParams.start_time">{{searchParams.start_time}}</text>
            <text v-else style="color:#8091A4;">请选择</text>
          </view>
          <text>至</text>
          <view class="filter_range" @click="() => selectTime(2)">
            <text v-if="searchParams.end_time">{{searchParams.end_time}}</text>
            <text v-else style="color:#8091A4;">请选择</text>
          </view>
        </view>
        <!--       选择时间弹框 -->
        <u-datetime-picker
            :show="timeVisible"
            v-model="searchValue"
            mode="date"
            @confirm="confirm"
        ></u-datetime-picker>
        <view class="zs_filter_btns">
          <up-button type="primary" shape="circle" plain text="重置" @click="handleReset"></up-button>
          <up-button type="primary" shape="circle" text="搜索" @click="handleSearch"></up-button>
        </view>
      </view>
    </u-popup>

  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { channelList, channelCount } from '@/api_request/api'
import { onReachBottom } from '@dcloudio/uni-app';
import { each } from 'lodash'
import moment from 'moment'

const isLoading = ref<boolean>(false)
const timeVisible = ref<boolean>(false)
const searchValue = ref<any>('')
const channelData = ref<any>([])
const page_num = ref<number>(1)
const page_size = ref<number>(10)
const totalRows = ref<number>(0)
const activeKey = ref<number>(0)
const tabsTitle = ref([
  {
    name: '全部',
    badge: {
      value: 5,
    },
  },
  {
    name: '中介渠道',
    type: 1,
    badge: {
      value: 5,
    }
  },
  {
    name: '关系渠道',
    type: 2,
    badge: {
      value: 5,
    }
  },
  {
    name: '推广渠道',
    type: 3,
    badge: {
      value: 5,
    }
  }
])

const filterVisible = ref<boolean>(false)
const searchParams = ref<any>({
  start_time: '',
  end_time: '',
  type: ''
})
const getChannelList = (flag?) => {
  isLoading.value = true
  channelList({page_num: page_num.value, page_size: page_size.value, ...searchParams.value}).then(res => {
    if(flag === 'reachBottom') {
      const __list = [...channelData.value]
      __list.push(...res.data.list)
      channelData.value = __list
    } else {
      channelData.value = res.data.list
    }
    console.log('jp======res111',res)
    isLoading.value = false

    totalRows.value = res.data.total
    page_num.value = res.data.page_num
    tabsTitle.value[0].badge.value = res.data.total
  })
}

getChannelList()

const initData = () => {
  channelCount({}).then(res => {
    console.log('jp=======渠道统计',res)
    const __tabsTitle = [...tabsTitle.value]
    each(res.data, (item) =>{
      const index = __tabsTitle.findIndex(v => v.type === item.type)
      if(index !== -1) {
        __tabsTitle[index].badge.value = item.count
      }
    })
    tabsTitle.value = __tabsTitle
  })
}
initData()

const tabschange = (item) => {
  // todo
  console.log('jp=======item',item)
  searchParams.value.type = item.type
  getChannelList()
}
const close = () => {
  filterVisible.value = false
}
const handleReset = () => {
  close()
  page_num.value = 1
  searchParams.value = {}
  getChannelList()
}
const handleSearch = () => {
  getChannelList()
  close()
}
//  1: 选择开始时间    2：选择结束时间
const selectTimeType = ref<number>(1)
const selectTime = (type) => {
  timeVisible.value = true
  selectTimeType.value = type
}
// 选择时间
const confirm = (val) => {
  console.log('jp=======val',val)
  const __value = val.value ? moment(val.value).format('YYYY-MM-DD') : ''
  timeVisible.value = false
  if(selectTimeType.value === 1) {
    searchParams.value.start_time = __value
    return
  }
  if(selectTimeType.value === 2) {
    searchParams.value.end_time = __value
  }
}
const openFilter = () => {
  filterVisible.value = true
}

// 新建渠道
const addChannel = () => {
  uni.navigateTo({url: `/subpkg/create_channel/index?title=新建渠道`})
}

const checkChannelDetail = (item: any) => {
  console.log('jp======查看详情',item)
  // 传参数
  uni.navigateTo({url: `/subpkg/channel_info/index?id=${item.id}`})
}

onReachBottom(() => {
  if(isLoading.value) return
  if(channelData.value?.length === totalRows.value) {
    return
  } else {
    page_num.value +=1
    getChannelList('reachBottom')
  }
})
</script>

<style lang="scss" scoped>
  .channel_container{
    font-size: $cus-font-size-14;
    .channel_tab{
      position: relative;
      padding-right: 30px;
      background: #fff;
      .filter_icon{
        position: absolute;
        top: 17px;
        right: 10px;
      }
    }


  }
  .zs_filter_btns{
    :deep(button) {
      width: 144px;
    }
  }
  :deep(.u-transition) {
    top: 44px!important;
  }
</style>